<template>
  <div class="app-container">
    <el-card class="mb20">
      <el-form :model="listQ" inline>
        <el-form-item label="单据号">
          <el-input
            placeholder="单据号"
            v-model="listQ.distributionNo"
          ></el-input>
        </el-form-item>
        <el-form-item label="承运单号">
          <el-input
            placeholder="承运单号"
            v-model="listQ.carryApplyNo"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">搜索</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button type="success" @click="OpenAdd">新增</el-button>
      <el-table :data="list">
        <el-table-column
          v-for="item in listC"
          :key="item.id"
          :label="item.label"
          :prop="item.prop"
        ></el-table-column>
        <el-table-column
          fixed="right"
          width="300px"
          label="操作"
          v-slot="{ row }"
        >
          <el-button type="primary" size="mini" @click="OpenEdit(row)"
            >修改</el-button
          >
          <el-button
            type="success"
            size="mini"
            @click="$message.success('配送成功')"
            >配送</el-button
          >
          <el-button
            type="success"
            size="mini"
            @click="$message.success('收货成功')"
            >收货</el-button
          >
          <el-button type="danger" size="mini" @click="handleDel(false, row.id)"
            >删除</el-button
          >
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      width="1400px"
      :title="title"
      :visible.sync="visible"
      @close="close"
      center
    >
      <el-form :model="listE" inline>
        <el-form-item label="单据号">
          <el-input
            v-model="listE.distributionNo"
            placeholder="单据号"
          ></el-input>
        </el-form-item>
        <el-form-item label="调度单号">
          <el-select
            @change="handleChange"
            v-model="listE.dispatchId"
            placeholder="调度单号"
          >
            <el-option
              v-for="item in dispatchList"
              :key="item.id"
              :label="item.vehicleDispatchNo"
              :value="item.id"
            ></el-option
          ></el-select>
        </el-form-item>
        <el-form-item label="车牌号" required>
          <el-input
            v-model="listE.vehicleNumber"
            placeholder="车牌号"
          ></el-input>
        </el-form-item>
        <el-form-item label="司机">
          <el-input v-model="listE.driver" placeholder="司机"></el-input>
        </el-form-item>
        <el-form-item label="司机联系电话">
          <el-input
            v-model="listE.driverPhone"
            placeholder="司机联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户">
          <el-input v-model="listE.customer" placeholder="客户"></el-input>
        </el-form-item>
        <el-form-item label="客户联系人">
          <el-input
            v-model="listE.customerContact"
            placeholder="客户联系人"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户联系人电话">
          <el-input
            v-model="listE.customerPhone"
            placeholder="客户联系人电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="配送状态">
          <el-input
            v-model="listE.deliveryStatus"
            placeholder="配送状态"
          ></el-input>
        </el-form-item>
        <el-form-item label="发货地址">
          <el-input
            v-model="listE.deliveryAddress"
            placeholder="发货地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="配送时间" required>
          <el-date-picker
            v-model="listE.deliveryDate"
            type="datetime"
            placeholder="配送时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="配送地址" required>
          <el-input
            v-model="listE.shipmentAddress"
            placeholder="配送地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="到达时间">
          <el-date-picker
            v-model="listE.arrivalDate"
            type="datetime"
            placeholder="到达时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="3"
            resize="none"
            v-model="listE.remark"
            placeholder="备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <el-table :data="listE.detailList">
        <el-table-column label="序号" v-slot="{ $index }">{{
          $index + 1
        }}</el-table-column>
        <el-table-column
          v-for="item in detailListC2"
          :key="item.id"
          :label="item.label"
          :prop="item.prop"
          :formatter="item.formatter"
        >
        </el-table-column>
      </el-table>
      <template #footer>
        <div>
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getVehicleDispatching, editCarrierApplication, addCarrierApplication } from '@/api_zc/wms/transportation-management/vehicle-dispatching'
import { getCustomerList } from '@/api_zc/task/sale-order-approve'
import { getCarrierApplication, getDetail } from '@/api_zc/wms/transportation-management/carrier-application'
import { getDistributionManagementList, editDistributionManagement, addDistributionManagement, delDistributionManagement } from '@/api_zc/wms/transportation-management/distribution-management'
export default {
  mounted () {
    this.getList()
    this.getUnity()
  },
  data () {
    return {
      list: [],
      listC: [
        {
          label: '编号',
          prop: 'id'
        },
        {
          label: '单据号',
          prop: 'distributionNo'
        },
        {
          label: '调度单号',
          prop: 'dispatchNo'
        },
        {
          label: '车牌号',
          prop: 'vehicleNumber'
        },
        {
          label: '司机',
          prop: 'driver'
        },
        {
          label: '司机联系电话',
          prop: 'driverPhone'
        },
        {
          label: '配送状态',
          prop: 'deliveryStatus'
        },
        {
          label: '配送时间',
          prop: 'deliveryDate'
        },
        {
          label: '到达时间',
          prop: 'arrivalDate'
        },
        {
          label: '客户',
          prop: 'customer'
        },
        {
          label: '客户联系人',
          prop: 'customerContact'
        },
        {
          label: '客户联系人电话',
          prop: 'customerPhone'
        },
        {
          label: '配送地址',
          prop: 'shipmentAddress'
        },
        {
          label: '发货地址',
          prop: 'deliveryAddress'
        },
      ],
      listQ: {
        distributionNo: '',
        carryApplyNo: ''
      },
      listE: {
        detailList: [],
        dispatchId: null
      },
      pager: {
        page: 1,
        limit: 10,
        total: 0
      },
      visible: false,
      isAdd: false,
      title: '',
      customerList: [],
      visibleCarry: false,
      detailListC: [
        {
          label: '车牌号',
          prop: 'vehicleNumber'
        },
        {
          label: '驾驶员',
          prop: 'driver'
        },
        {
          label: '联系电话',
          prop: 'phone'
        },
        {
          label: '载重',
          prop: 'loadCapacity'
        },
      ],
      isEditer: false,
      delIds: [],
      carryQ: {
        carryApplyNo: '',
        outStockNo: '',
        deliveryNo: "",
        customerId: '',
        applyUser: '',
        applyStartTime: '',
        applyEndTime: '',
        applyStatus: '',
        approveUser: '',
        approveStartTime: '',
        approveEndTime: '',
        approveStatus: ''
      },
      list2: [],
      listC2: [
        {
          label: '编号',
          prop: 'id'
        },
        {
          label: '单据号',
          prop: 'carryApplyNo'
        },
        {
          label: '出库单号',
          prop: 'outStockNo'
        },
        {
          label: '客户',
          prop: 'customer.name'
        },
        {
          label: '收货地址',
          prop: 'deliveryAddress'
        },
        {
          label: '联系人',
          prop: 'contact'
        },
        {
          label: '联系电话',
          prop: 'phone'
        },
        {
          label: '承运人',
          prop: 'carrier'
        },
        {
          label: '交货日期',
          prop: 'deliveryDate'
        },
        {
          label: '运输距离',
          prop: 'distance'
        }
      ],
      carryDetail: {
        customer: {},
        detailList: []
      },
      detailListC2: [
        {
          label: '物料',
          prop: 'material.name'
        },
        {
          label: '生产批号',
          prop: 'batchNo'
        },
        {
          label: '仓库',
          prop: 'warehouse.name'
        },
        {
          label: '库区',
          prop: 'area.code'
        },
        {
          label: '库位',
          prop: 'location.code'
        },
        {
          label: '发货数量',
          prop: 'quantity'
        },
        {
          label: '单价',
          prop: 'price'
        },
        {
          label: '总价',
          prop: 'amount'
        },
        {
          label: '备注',
          prop: 'remark'
        },
      ],
      carryDetailVisible: false,
      dispatchList: []
    }
  },
  methods: {
    async getCarrierApplication () {
      const { data: { content } } = await getCarrierApplication({ ...this.carryQ, page: 1, limit: 999 })
      this.list2 = content
    },
    handleReset () {
      Object.assign(this.listQ, this.$options.data().listQ)
      this.getList()
    },
    async getList () {
      const { data: { content, total } } = await getDistributionManagementList({ ...this.listQ, page: this.pager.page, limit: this.pager.limit })
      this.list = content
      this.pager.page = total
    },
    async getUnity () {
      const data1 = await getCustomerList()
      this.customerList = data1.data.content
      const data2 = await getVehicleDispatching({ page: 1, limit: 999 })
      this.dispatchList = data2.data.content
    },
    OpenEdit (row) {
      this.$nextTick(() => {
        this.listE = row
      })
      this.title = '修改配送单'
      this.visible = true
      this.isAdd = false
    },
    OpenAdd () {
      this.title = '添加配送单'
      this.visible = true
      this.isAdd = true
    },
    handleDel (isMany, id) {

    },
    OpenCarry () {
      this.visibleCarry = true
    },
    close () {
      this.visible = false
      Object.assign(this.listE, this.$options.data().listE)
      this.getList()
    },
    addDetail () {
      this.listE.detailList.push({
        vehicleNumber: '',
        driver: '',
        phone: '',
        loadCapacity: '',
        id: Math.ceil(Math.random() * 1000000)
      })
    },
    CellDblckick () {
      this.isEditer = true
    },
    blur () {
      this.isEditer = false
    },
    SelectionChange (list) {
      this.delIds = list.map(item => item.id)
      console.log(this.delIds)
    },
    delDetail () {
      this.listE.detailList = this.listE.detailList.filter(item => {
        return !this.delIds.includes(item.id)
      })
    },
    OpenCarry () {
      this.visibleCarry = true
    },
    close2 () {
      this.visibleCarry = false
    },
    selectCarry (row) {
      this.listE.carryApplyId = row.id
      this.visibleCarry = false
    },
    handleCarryDetail (row) {
      this.carryDetail = row
      this.carryDetailVisible = true
    },
    async submit () {
      this.listE.arrivalDate = new Date(this.listE.arrivalDate)
      this.listE.deliveryDate = new Date(this.listE.deliveryDate)
      if (!this.listE.vehicleNumber) {
        return this.$message.warning('请输入车牌号')
      }
      if (!this.listE.deliveryDate) {
        return this.$message.warning('请选择配送时间')
      }
      if (!this.listE.shipmentAddress) {
        return this.$message.warning('请输入配送地址')
      }
      this.listE.customerId = this.listE.customer.id
      if (this.isAdd) {
        await addDistributionManagement(this.listE)
        this.$message.success('添加成功')
      } else {
        await editDistributionManagement(this.listE)
        this.$message.success('修改成功')
      }
      this.visible = false
      this.getList()
    },
    async handleDel (flag, id) {
      await delDistributionManagement({ ids: [id] })
      this.$message.success('删除成功')
      this.getList()
    },
    handleChange (val) {
      this.getDetail(val)
      // this.listE.detailList = this.dispatchList.find(item => item.id == val).detailList
    },
    async getDetail (id) {
      const { data } = await getDetail({ id })
      this.listE.detailList = data
    }
  }
}
</script>

<style>
</style>